<template>
  <pageTabelLayout v-loading="pageData.loadingUp">
    <template #pageHeader>
      <div class="search-form isheader" v-show="pageData.headerShow">
        <a-form size="small" :model="query" layout="inline">
          <CorporateSectorCascader :style="{ width: '200px' }" :configCascader="configCascader"
            @changeCascader="changeCascader" />
          <a-form-item label="物料编号">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.materialCode" />
          </a-form-item>
          <a-form-item label="固定资产编号">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.numberId" />
          </a-form-item>
          <a-form-item label="物料名称">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.materialName" />
          </a-form-item>
          <a-form-item label="位置号">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" v-model="query.floorDistrict" />
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="pageData.headerShow" @click="pageData.headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="pageData.headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <el-button plain :icon="Upload" @click="exportExcel">导出</el-button>
        </a-space>
      </div>
    </template>
    <!-- <div style="background-color: #f0f2f5; height: 10px"></div> -->
    <template #pageTabel>
      <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
    </template>
  </pageTabelLayout>
</template>
      
<script lang="ts" setup>
// 引入element提示
import { ElMessage, ElMessageBox } from 'element-plus'
//引入封装post
import { post } from '@/api/http'
import { tableColumns, tableColumns1 } from './FixedTimeDepreciationStatistics'
import buttionRender from '@/components/aggridCellRenDerer/buttionRender.vue'
import { Search, Delete, CirclePlus, Upload } from '@element-plus/icons-vue'
import { EXELTABLE } from '@/utils/exportEXCEL'
import { Message, Modal } from "@arco-design/web-vue"
import CorporateSectorCascader from '@/components/corporateSectorCascader1/index.vue'

let cascaderRef = ref('')
let configCascader = ref<{}>({
  corporateWidth: '180px', //公司宽度
  corporateRquired: false, //公司是否必填
  sectorRquired: false, //部门是否必填
  size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
  corporateName: '公司', //公司label
  cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
  const { corporateLabel, corporateId } = data
  console.log(data)
  query.companyName = corporateLabel
  query.companyId = corporateId
}
let pageData = reactive<any>({
  headerShow: true,
  type: '',
  loadingUp: false,
})
let refgridOption = ref<any>()
let configaggrid = ref({
  url: 'wms/ironwareStockInfo/selectList', //接口路径
  queryData: {
    deleteState: 0,
    companyName: '',
    numberId: '',
  },
  paginationShow: true, //分页是否显示
  invokeiIterface: true, //是否调用接口
  rowMultiSelectWithClick: true, //点击行是否多选
  column: tableColumns,
  fileName: 'FixedTimeDepreciationStatistics-1'
})
let query = reactive<any>({
  numberId: '',
  deleteState: '',
  companyName: '',
  companyId: '',
  materialCode: '',
  materialName: '',
  floorDistrict: '',
})
// 导出
let exportExcel = () => {
  // EXELTABLE(tableColumns, [], '固定时间折旧统计')
  console.log(refgridOption.value.getSelectedRows());

  if (refgridOption.value.getSelectedRows().length === 0) {
    Message.error('请先勾选')
    return;
  } else {
    EXELTABLE(tableColumns1, refgridOption.value.getSelectedRows(), '固定时间折旧统计')
  }
  // refgridOption.value.exportDataAsExcel('固定时间折旧统计')
}
onMounted(() => {
  getList()
})
const getList = () => {
  refgridOption.value.setQuery(query)
}
</script>
<script lang="ts">
export default defineComponent({
  name: 'FixedTimeDepreciationStatistics',
})
</script>
<style scoped>
.contioner {
  height: 100%;
}

.contentPrint {
  width: 100%;
  display: flex;
  justify-content: space-between;

  color: #000 !important;
}

.printLeft {
  width: 56%;
}

.printTitle {
  font-size: 22px;
  font-weight: 700;
  margin-top: 20px;
}

.printRight {
  width: 43%;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.ermPrint {
  display: flex;
  justify-content: center;
  /* flex-flow: column wrap; */
  align-items: center;
}

.erm {
  width: 160px;
  height: 50px;
  background: #999;
}

.formPrint {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.ban {
  width: 50%;
  margin-bottom: 5px;
}

.quan {
  width: 100%;
  margin-bottom: 5px;
}

table {
  text-align: center;
  color: #000;
}

td {
  color: #000;
}

th {
  color: #000;
}

.tablePrint {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  flex-flow: row wrap;
}

.footerPrint {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  color: #000;
}

.createTime {
  width: 100px;
}

.printw {
  width: 30%;
  margin-bottom: 5px;
}

:deep(.el-dialog__body) {
  color: #000;
}

.my-tool-bar {
  /* background:#fff; */
  margin: 5px 0 5px 0;
}

.c-header {
  background: #fff;
  padding: 15px 0 10px 0;
}

:deep(.el-input__inner) {
  color: #3b3a3a;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #474849 inset;
}

:deep(.el-form-item__label) {
  color: #202021;
}

:deep(.arco-drawer-container) {
  z-index: 1000 !important;
}
</style>